<template>
  <div class="flex justify-between mb-10px">
    <div>
      <TypographyText class="mr-10px">主题名:</TypographyText>
      <Input v-model:value="selectReq.topicName" class="mr-10px" style="width: 240px"></Input>

      <Button class="mr-10px" @click="handleReset">重置</Button>
      <Button type="primary" @click="get">查询</Button>
    </div>
    <div>
      <Button v-per="'addTheme'" type="primary" @click="add">新增主题</Button>
    </div>
  </div>
  <div>
    <Table
      :columns="topicColumns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="false"
      :scroll="scroll"
      bordered
      class="main-table"
      show-size-changer
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <span v-per="'addSubscription'">
            <a @click="onAddSub(record.topicUrn, record.topicName)">添加订阅</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'detail'">
            <a @click="onDetails(record.topicUrn)">详情</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'update'">
            <a @click="onEdit(record.topicUrn)">更改显示名</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'delete'">
            <Popconfirm cancel-text="取消" ok-text="确认" title="确定要删除吗?" @confirm="onDelete(record.topicUrn)">
              <a>删除</a>
            </Popconfirm>
          </span>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      v-model:current="current"
      v-model:pageSize="pageSize"
      :show-total="(total) => `共 ${total} 条`"
      :total="total"
      show-size-changer
      @showSizeChange="onShowSizeChange"
    />
    <TopicAddAndEditModal ref="drawerRef" v-bind="props" @closeDrawer="closeDrawer"></TopicAddAndEditModal>
    <subscriptionDrawer ref="subDrawerRef" v-bind="subProps" @closeSubDrawer="closeSubDrawer"></subscriptionDrawer>
    <TopicDetailsDrawer
      ref="detailsRef"
      v-bind="detailsProps"
      @closeDetailsDrawer="closeDetailsDrawer"
      @updateSub="updateSub"
    ></TopicDetailsDrawer>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { Button, Divider, Input, message, Pagination, Popconfirm, Table, TypographyText } from 'ant-design-vue';
import { topicColumns } from '/@/views/maintenance-center/message-theme/components/topic';
import {
  deleteTopic,
  getTopicDetail,
  getTopicList,
} from '/@/api/maintenance-center/message-notification/messageNotification';
import { TopicDetailItem } from '/@/api/maintenance-center/message-notification/model/messageNotificationModel';
import SubscriptionDrawer from '/@/views/maintenance-center/message-theme/subscriptionDrawer.vue';
import TopicDetailsDrawer from '/@/views/maintenance-center/message-theme/topicDetailsDrawer.vue';
import TopicAddAndEditModal from '/@/views/maintenance-center/message-theme/topicAddAndEditModal.vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const detailsCurrent = ref(1);
const detailsSize = ref(5);
const detailsTotal = ref(0);
//查询
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let dataSource = ref<TopicDetailItem[]>([]);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  topicName: '',
});

async function get() {
  let params = {
    current: current.value,
    size: pageSize.value,
    topicName: selectReq.topicName,
  };
  try {
    let res = await getTopicList(params);
    dataSource.value = res.items;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
}

// 重置
async function handleReset() {
  selectReq.topicName = '';
  get();
}

const onShowSizeChange = (current: number, pageSize: number) => {
  selectReq.size = pageSize;
  selectReq.current = current;
  get();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  get();
});

// 公共
const props = ref({
  visible: false,
  drawerType: '',
  title: '',
  URN: '',
});
const closeDrawer = () => {
  props.value.visible = false;
  get();
};
const subProps = ref({
  visible: false,
  drawerType: '',
  title: '',
  URN: '',
  topicName: '',
});
const closeSubDrawer = () => {
  subProps.value.visible = false;
  get();
};
const detailsProps = ref({
  visible: false,
  title: '',
  URN: '',
  topicDetailItem: {},
  size: detailsSize.value,
  current: detailsCurrent.value,
  total: detailsTotal.value,
});
const closeDetailsDrawer = () => {
  detailsProps.value.visible = false;
};
// 新增
const add = () => {
  props.value.drawerType = 'add';
  props.value.title = '新增主题';
  props.value.visible = true;
};

async function onAddSub(topicURN: string, topicName: string) {
  subProps.value.drawerType = 'topic';
  subProps.value.title = '添加订阅';
  subProps.value.URN = topicURN;
  subProps.value.topicName = topicName;
  subProps.value.visible = true;
}

// 删除
async function onDelete(topicURN: string) {
  const param = {
    topicUrn: topicURN,
  };
  await deleteTopic(param)
    .then(() => {
      message.success('删除主题成功');
      get();
    })
    .catch((e) => {
      message.error('删除失败：' + e.response.data.msg);
    });
}

// 编辑
async function onEdit(topicURN: string) {
  props.value.drawerType = 'edit';
  props.value.title = '更改显示名';
  props.value.URN = topicURN;
  props.value.visible = true;
}

// 详情
async function onDetails(topicURN: string) {
  const params = {
    size: detailsSize.value,
    current: detailsCurrent.value,
    topicUrn: topicURN,
  };
  const res = await getTopicDetail(params);
  detailsProps.value.topicDetailItem = res;
  detailsProps.value.title = '主题详情';
  detailsProps.value.URN = topicURN;
  detailsProps.value.visible = true;
  detailsProps.value.total = res.subscriptions.total;
  detailsProps.value.current = res.subscriptions.current;
  detailsProps.value.size = res.subscriptions.size;
}

let updateSub = (pageSize: number, current: number) => {
  detailsSize.value = pageSize;
  detailsCurrent.value = current;
  onDetails(detailsProps.value.URN);
};
get();
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
